<template>
	<view class="authentic">
		<image src="/static/images/id_logo.png" mode="widthFix" style="width: 50%;position:fixed;right:10rpx;top:10rpx;">
		</image>
		<view class="authentic_top flex">
			<image mode="widthFix" style="width: 20%;" src="/static/images/authentication.png" />
			<view class="top_right">
				<view class="top_mainTitle">实名认证安全保障</view>
			</view>
		</view>
		<view class="info_person">
			<view class="info_title">
				<view class="" style="margin-bottom: 20rpx;">
					核对您的个人信息
				</view>
			</view>
			<view class="info_user">
				<view class="input_label flex align-center" style="margin-bottom: 10rpx;gap:40rpx">
					<text>您的姓名</text>
					<input placeholder="请输入真实姓名" type="text" v-model="userName"/>
				</view>
				<view class="input_label flex align-center" style="margin-bottom: 10rpx;gap:40rpx">
					<text>身份证号</text>
					<input placeholder="请输入身份证号" type="idcard" v-model="userIdcard"/>
				</view>
			</view>
			<!-- 上传照片位移到 审核通过之后、签署合同之前 -->
			<!-- <view class="idCard flex justify-between">
				<view class="img_view" @click="uploadPhoto(1)">
					<view class="">
						<image v-if="!card_front.length" src="/static/images/ID-card1.png" mode="scaleToFill"
							style="width:278rpx;height: 214rpx ;"></image>
						<image v-else :src="getImg(card_front)" mode="scaleToFill" style="width:278rpx;height: 214rpx ;"></image>
					</view>
				</view>
				<view class="img_view" @click="uploadPhoto(2)">
					<view class="">
						<image v-if="!card_back.length" src="/static/images/ID-card2.png" mode="scaleToFill"
							style="width:278rpx;height: 214rpx ;"></image>
						<image v-else :src="getImg(card_back)" mode="scaleToFill" style="width:278rpx;height: 214rpx ;">
						</image>
					</view>
				</view>
			</view> -->
			<view class="">
				<image src="/static/images/AuthChecked.png" mode="scaleToFill" style="width: 32rpx;height: 32rpx;">
				</image>
				<text class="radio-text">我同意e签宝采集人脸照片并提供给广州皓海同舟信息技术有限公司用于实名认证</text>
			</view>
		</view>
		<view class="info_btn">
			<!-- <button style="" @click="handleClick">完成认证</button> -->
			<button style="" @click="handleOrder">确认下单</button>
		</view>
	</view>
</template>

<script>
	import {
		debounce
	} from '@/utils/debounce'
	import {
		uploadImg
	} from '@/utils/request'
	import {
		realPersonAuth,
		getPersonAuth,
		faceAuthNotice,
		realPersonAuth2
	} from '@/api/authentication'
	export default {
		data() {
			return {
				userName: '',
				userIdcard: '',
				card_front: '',
				card_back: '',
				frontCard: [],
				backCard: [],
				orderId: '',
				goodsId: ''
			}
		},
		onLoad(options) {
			this.orderId = options.orderId
			this.goodsId = options.goodsId
			getPersonAuth().then(res => {
				this.userName = res.certName
				this.userIdcard = res.certNo
				this.card_front = res.cardFront
				this.card_back = res.cardBack
				console.log(res);
			})
		},
		onShow(options) {},
		methods: {
			handleOrder: debounce(function(e) {
				let params = {
					certName: this.userName,
					certNo: this.userIdcard,
					orderId: this.orderId,
					cardFront: this.card_front,
					cardBack: this.card_back,
					gooddsId: this.goodsId
				}
				realPersonAuth2(params).then(res => {
					// uni.reLaunch({
					// 	url: `/pagesA/my/order/myorder/orderDetail?order_id=${ params.orderId }`
					// })
					uni.navigateTo({
						url:'/pagesB/paySuccess/paySuccess?orderId='+params.orderId
					})
				})
			}, 200),
			getImg(url) {
				return getApp().globalData.baseImg + url;
			},
			// onName: debounce(function(e) {
			// 	this.userName = e.detail.value
			// }, 2000),
			// onIdcard: debounce(function(e) {
			// 	this.userIdcard = e.detail.value
			// }, 2000),
			handleClick: debounce(function(e) {
				let params = {
					certName: this.userName,
					certNo: this.userIdcard,
					orderId: this.orderId,
					cardFront: this.card_front,
					cardBack: this.card_back,
					gooddsId: this.goodsId
				}
				realPersonAuth(params).then(res => {
					// uni.navigateTo({
					// 	url:'/pagesA/web-view/web-view?certName='+params.certName+'&certNo='+params.certNo+'&certNo='+params.certNo+'&orderId='+params.orderId+'&cardFront='+params.cardFront+'&cardBack='+params.cardBack
					// })
					uni.navigateToMiniProgram({
						appId: 'wx1cf2708c2de46337',
						path: '/pages/index/index',
						extraData: {
							requestObj: { // 必填，入参
								flowId: res.flowId, // 必填，认证流程Id
								type: 'REALNAME', // 必填，业务类型：实名 REALNAME
								env: 'prod' // 非必填，对接环境：线上 prod(默认）, 模拟 sml(用于对接调试阶段）
							},
							callbackObj: { // 非必填，回传数据：签署完成后会将此数据完整回传
								test: '12345',
								'from': 'esign',
								'userId': res.user_id,
								'orderId': this.orderId,
								'flowId': res.flowId
							}
						}
					})
				})
			}, 1000),
			uploadPhoto(e) {
				let list = []
				let that = this
				if (e == 1) {
					uploadImg(function(url) {
						if (url) {
							list.push(url);
							that.frontCard = list
							that.card_front = list[0]
						}
					});
				} else {
					uploadImg(function(url) {
						if (url) {
							list.push(url);
							that.backCard = list
							that.card_back = list[0]
						}
					});
				}
			}
		}
	}
</script>

<style>
	.authentic {
		height: 300rpx;
		background: linear-gradient(90deg, #F6706E, #FF7E63);
		padding-top: 200rpx;
		font-family: Source Han Sans CN;
		color: #333333;
		font-size: 30rpx;
	}

	.authentic_top {
		padding: 0 30rpx;
		margin-top: -120rpx;
	}

	.authentic_top image {
		width: 100rpx;
		height: 105rpx;
		margin: auto 0;
		margin-right: 30rpx;
	}

	.top_mainTitle {
		font-size: 46rpx;
		color: #FFF;
		margin-bottom: 15rpx;
	}

	.top_title {
		font-size: 26rpx;
		color: #FFF;
		line-height: 35rpx;
	}

	.info_person {
		width: 80%;
		margin: 0 auto;
		border-radius: 20rpx;
		height: 420rpx;
		background: #FFF;
		padding: 40rpx 50rpx;
		margin-top: 50rpx;
	}

	.info_title {
		font-size: 34rpx;
		font-weight: 700;
		margin-bottom: 30rpx;
	}

	.input_label {
		height: 80rpx;
		font-size: 30rpx;
		line-height: 80rpx;
		border-bottom: 1px solid #E6E6E6;
		margin-top: 20rpx;
	}

	.idCard {
		margin-bottom: 80rpx;
		box-sizing: border-box;
		flex-wrap: nowrap;
	}

	.img_view {
		width: 47%;
		height: 175rpx;
		background: #F9F9F9;
		border-radius: 10rpx;
		position: relative;
	}

	.info_btn {
		width: 90%;
		position: fixed;
		bottom: 0;
		left: 5%;
		margin-bottom: 20rpx;
	}

	.info_btn button {
		background: #F9736A;
		border-radius: 45rpx;
		text-align: center;
		font-size: 34rpx;
		color: #fff;
		box-sizing: border-box;
	}
</style>